<template>
  <div>
    <!--
    type按钮的类型（里面的单词不同里面颜色也就不同）
    @click单击事件
    showWin()掉methods中的方法
    -->
    <el-button type="primary" @click="showWin()">新增</el-button>

    <!--弹框开始-->
    <!--
    el-dialog是一个弹出窗口
     :属性绑定 title对应data中的一个属性
     :visible.sync控制当前窗口显示不显示
    -->
    <el-dialog
        :title="title"
        :visible.sync="dialogVisible"
        width="30%" append-to-body
    >

      <!--内容从这里开始-->
      <!--
      el-form是一个表单
      ref="form"给form一个id
      v-model提交的数据
      label-width商品类别名称的宽度
      -->
      <el-form ref="form" v-model="form" label-width="100px">
        <el-form-item label="商品类别名称">
          <el-input v-model="form.pname"></el-input>
        </el-form-item>
        <el-form-item label="商品类价格">
          <el-input v-model="form.price"></el-input>
        </el-form-item>

      </el-form>
      <!--内容从这里结束-->

      <!--
      slot插槽
      -->
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click=" save()">确 定</el-button>
  </span>
    </el-dialog>
    <!--弹框结束-->

    <!--查询列表开始-->

    <!--
    table表格
    :data表格的数据
    column表格里的列
    prop显示列里的属性
    label标题
    -->
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          prop="pid"
          label="商品编号"
      >
      </el-table-column>
      <el-table-column
          prop="pname"
          label="商品名称"
      >
      </el-table-column>
      <el-table-column
          prop="price"
          label="商品价格">
      </el-table-column>
      <el-table-column
          prop="stock"
          label="库存数量">
      </el-table-column>

      <!--上下架开始-->
      <!--      <el-table-column-->
      <!--          prop="state"-->
      <!--          label="状态">-->
      <!--        <template #default="scope">-->
      <!--          <el-button type="success" v-if="scope.row.state===1" @click="upAndDowh(scope.row)">已上架</el-button>-->
      <!--          <el-button type="danger" v-else @click="upAndDowh(scope.row)">已下架</el-button>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <!--上下架结束-->

      <!--
      fixed="right"固定到右边
      -->
      <el-table-column
          fixed="right"
          label="操作"
          width="150">
        <!--查询列表结束-->

        <!--删除按钮开始-->

        <!--
        slot-scope作用于插槽
        el-button按钮
        -->
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle @click="showWin(scope.row)"></el-button><!--修改按钮-->
          <el-button type="danger" icon="el-icon-delete" circle @click="del(scope.row)"></el-button><!--删除按钮-->
        </template>
        <!--删除按钮结束-->

      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "ShangpinCom",
  /*列表查询开始*/
  //created界面加载完成的回调
  created() {
    console.info("界面加载完成之后的事件被执行");
    //界面加载完成后往后台发送ajax请求 获取用户数据
    this.loadData();
  },
  data() {
    return {
      title: '',//标题
      tableData: [],//表格数据
      dialogVisible: false,//关键字
      form: {},//提交的表单
      data: ""
    }
  },
  /*列表查询结束*/
  //所有"方法"都写在这里
  methods: {//方法
    //点击删除按钮的事件
    del(row) {
      this.$confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.info("row", row)
        //往后台发送请求 根据 商品类别id 删除商品类别
        this.$http.post("shangpin/del", {pid: row.pid}).then(res => {
          console.info("后台返回的数据", res);
          //刷新数据
          this.loadData();
        });

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    /*查询开始*/
    //封装一个方法
    loadData() {
      //往后台发送请求获取所有的商品类别列表数据
      this.$http.post("shangpin/listAll").then(rus => {
        console.info("后台返回的数据", rus);
        //后台返回的当前数据
        this.tableData = rus.data;
      })
    },
    /*查询结束*/

    /*新增或修改开始*/
    //弹出一个窗口
    showWin(row) {
      //判断如果row存在  就给form赋值
      if (row) {
        this.form = row;
        this.title = "修改商品类别信息";
      } else {
        this.form = {};
        this.title = "新增商品类别信息";
      }
      //在浏览器的控制台打印一句话
      console.info("我被调用了");
      //首先界面上要有一个窗口 然后设置窗口展示
      this.dialogVisible = true;//让弹框显示
    },
    //保存的方法
    save() {
      console.info("我要保存");
      console.info(this.form)
      //往后台发请求 保存商品类别数据 回调函数
      this.$http.post("shangpin/saveOrUpdate", this.form).then(res => {
        console.info("后台返回的数据", res.data.success);
        //判断如果res.data.success值为1 成功了
        if (res.data.success == 1) {
          //关闭窗口
          this.dialogVisible = false;
          //刷新数据
          this.loadData();
        }
        //否则 就失败
        else {
          alert(res.data.error);
        }
      });
    },
    /*新增或修改结束*/

    /*上下架开始*/
    upAndDowh(row) {
      this.$http.post("shangpin/sjzt", {pid: row.pid, state: row.state === 1 ? 0 : 1})
          .then((res) => {
            if (res.data !== 1) {
              this.$message.error('操作失败');
              return;
            }
            //刷新数据
            this.loadData();
            this.$message({
              type: 'success',
              //即判断内容右判断类型 ===判断类型和内容是否一致  ！取反  &&并且
              message: `已${row.state === 1 ? "下架" : "上架"}${row.pname}`
            });
          });
    }
    /*上下架结束*/
  }
}
//const常量
</script>

<style scoped>

</style>